:root {
    --dark: #002c9b;
    --light: #c8dfff;
  }
  
  body {
    height: 100vh;
    width: 100%;
    display: grid;
    place-items: center;
    background: url(../img/bgsee.png);
  }
  
  
  .wrapper {
    animation: fish 1.5s ease infinite alternate;
    transform: translate(-4px, -2px);
  }
  @keyframes fish {
    from {
      transform: translate(-4px, -2px);
    }
    to {
      transform: translate(0px, 0px) rotate(1deg);
    }
  }
  
  .bod {
    color: var(--light);
    transform-origin: 0 50%;
    animation: bod 1.5s ease infinite alternate;
  }
  @keyframes bod {
    from {
      transform: translateX(0px) scalex(1);
    }
    to {
      transform: translateX(0.25px) scalex(0.98);
    }
  }
  
  .eye {
    color: var(--dark);
  }
  
  .fin-tail {
    color: var(--dark);
    transform-origin: 200px;
    animation: tail 1.5s 1.5s ease infinite alternate;
  }
  @keyframes tail {
    from {
      transform: scaleX(1) rotate(0deg);
    }
    to {
      transform: scaleX(0.75) rotate(3deg);
    }
  }
  
  .fin-back-bottom {
    color: var(--dark);
    transform-origin: 155px;
    animation: fin-bottom 1.5s ease infinite alternate;
  }
  .fin-front-bottom {
    color: var(--dark);
    transform-origin: 76px;
    animation: fin-bottom 1.5s ease infinite alternate;
  }
  @keyframes fin-bottom {
    from {
      transform: rotate(-4deg) scaleY(0.98);
    }
    to {
      transform: rotate(0deg) scaleY(1);
    }
  }
  
  .fin-front-top {
    color: var(--dark);
    transform-origin: 80px;
    animation: fin-front 1.5s ease infinite alternate;
  }
  @keyframes fin-front {
    from {
      transform: rotate(0deg) scaleX(1);
    }
    to {
      transform: rotate(-8deg) scaleX(0.55);
    }
  }
  
  .fin-dorsel {
    color: var(--dark);
    transform-origin: 80px;
    animation: fin-top 1.5s ease infinite alternate;
    transform: rotate(2deg) translate(2px, 3px);
  }
  .fin-back-top {
    color: var(--dark);
    transform-origin: 145px;
    animation: fin-top 1.5s ease infinite alternate;
  }
  @keyframes fin-top {
    from {
      transform: rotate(2deg) translate(2px, 3px);
    }
    to {
      transform: rotate(0deg) translate(0px, 0px);
    }
  }

  @keyframes lToR
  {
    from {width: 0px;}

  }


.bar-div {
    width: 30%;
   animation:lToR 3s infinite;
    margin-top: 100px;
    display: block;
  }

  button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: inherit;
    font-family: inherit;
  }
  button.learn-more {
    font-weight: 600;
    color: #382b22;
    text-transform: uppercase;
    padding: 1.25em 2em;
    background: #fff0f0;
    border: 2px solid #b18597;
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
  }
  button.learn-more::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9c4d2;
    border-radius: inherit;
    box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
  }
  button.learn-more:hover {
    background: #ffe9e9;
    transform: translate(0, 0.25em);
  }
  button.learn-more:hover::before {
    box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
    transform: translate3d(0, 0.5em, -1em);
  }
  button.learn-more:active {
    background: #ffe9e9;
    transform: translate(0em, 0.75em);
  }
  button.learn-more:active::before {
    box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
    transform: translate3d(0, 0, -1em);
  }
  
  